<template>
    <el-table :data="tableData" :span-method="spanMethodOfParent" style="width: 100%; margin-bottom: 20px;" row-key="id">
        <el-table-column label="2C售后-聚水潭" type="expand" align="center">
            <el-table-column label="出库日期" align="center" />
            <el-table-column label="店铺名称" align="center">
                <template #default="scope">
                    <el-table class="childrenTable" :data="scope.row.shopNameList" empty-text="xx" row-key="id"
                        style="width: 100%;" :show-header="false">
                        <el-table-column prop="jstoutBoundDate" align="center" />
                        <el-table-column prop="shopName" align="center" />
                        <el-table-column prop="jstCode" align="center" />
                        <el-table-column prop="jstSumCount" align="center" />
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column label="金蝶物料编码" align="center" />
            <el-table-column label="求和项:数量" align="center" />
        </el-table-column>
        <el-table-column label="2C售后-金蝶" align="center">
            <el-table-column label="日期" align="center" />
            <el-table-column label="客户" align="center">
                <template #default="scope">
                    <el-table class="childrenTable" :data="scope.row.customList" empty-text=" " row-key="id"
                        style="width: 100%;" :show-header="false">
                        <el-table-column prop="kingDeeDate" label="日期" align="center" />
                        <el-table-column prop="custom" align="center" />
                        <el-table-column prop="kingDeeCode" align="center" />
                        <el-table-column prop="kingDeeSumCount" align="center" />
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column  label="物料编码" align="center" />
            <el-table-column  label="求和项：调拨数量" align="center" />
        </el-table-column>
    </el-table>
</template>

<script setup lang='ts'>
import { ref, onMounted } from 'vue'
import { salesCheckList } from '@/mock/api'

const tableData = ref([])

const spanMethodOfParent = ({ row, column, rowIndex, columnIndex }) => {
    // if (columnIndex > 1 && columnIndex < 5) {
    //     return [0, 0]
    // }
    // if(columnIndex == 0){
    //     return [0, 4]
    // }
    // // if (columnIndex < 4) {
    // //     return [1, 4]
    // // }
    // // 隐藏父Table中的第3列到第7列
    // // if (columnIndex > 1 && columnIndex < 5) {
    // //     return [0, 0]
    // // }
    // if (columnIndex > 5 ) {
    //     return [0, 0]
    // }
    // // if (columnIndex === 5) {
    // //     return [5, 8]
    // // }
    if(columnIndex == 1){
        return [1, 4]
    }
    if(columnIndex == 0){
        return [0, 0]
    }
    if( columnIndex == 3 ){
        return [4, 8]
    }
    if( columnIndex == 2 ){
        return [0, 0]
    }
    
}


onMounted(async () => {
    let res = await salesCheckList()
    tableData.value = res.data
    console.log('tableData', tableData.value)
})

</script>
<style scoped>
/* :deep(.childrenTable){
    --el-table-border-color: none;
} */
:deep(.childrenTable .el-table__inner-wrapper:before) {
    background: none;
    height: 0;
}
:deep(.childrenTable tr.el-table__row:last-child td.el-table__cell) {
  border-bottom: none !important;
}
</style>